<template>
  <div class="sxc-player" ref="container" @click.stop="isClearMode=!isClearMode">
    <!--模拟poster -->
    <div
      class="_poster"
      :style="{backgroundImage:`url(${options.coverPath})`}"
      v-show="!isPlaying&&isStart"
    ></div>
    <template v-show="isPlaying">
      <video
        class="_video-ref"
        webkit-playsinline
        playsinline
        x5-video-player-fullscreen
        x-webkit-airplay="allow"
        x5-video-player-type="h5"
        crossorigin="anonymous"
        ref="video"
        :muted="options.muted"
        :poster="options.coverPath"
        @ended="onEnd"
        @play="onPlay"
        :src="vUrl"
        :type="`video/${getUrlType(vUrl)}`"
      />
      <!-- <transition name="fade">
        <PlayBtn :isPlaying.sync="isPlaying" v-show="!isClearMode" />
      </transition>
      <transition name="fade">
        <BaseControls
          @paused="handlePaused"
          @fullscreen="$emit('fullscreen',$event)"
          v-show="!isClearMode"
        />
      </transition> -->
    </template>
  </div>
</template>
<script>
import BaseControls from './base-controls'
import PlayBtn from './play-btn'

export default {
  name: 'sxc-video-player',
  components: {
    BaseControls,
    PlayBtn
  },
  props: {
    video: {
      type: Object,
      default: function () {
        return {}
      }
    },
    mutex: {
      type: Boolean,
      default: false
    },
    playerStart: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      baseVideo: {
        url: '',
        cover: '',
        muted: false,
        loop: true,
        preload: 'metadata',
        poster: '',
        volume: 1,
        autoplay: true
      },
      $video: null,
      $container: null,
      clearModeTimer: null,
      isStart: true,
      isPlaying: false,
      isClearMode: false
    }
  },
  watch: {
    isPlaying () {
      this.isStart = false
      this.play()
      this.setClearModeTimer()
    },
    playerStart(){
    }
  },
  computed: {
    vUrl () {
      return this.video.url;
    },
    // 合并默认和用户自定义属性配置
    options () {
      return Object.assign({}, this.baseVideo, this.video)
    }
  },
  methods: {
    getUrlType (url) {
      let u = url.split('?')[0] + '?v=1'
      // eslint-disable-next-line no-useless-escape
      return u.match(/[^\.]+(?=\?)/) || 'mp4'
    },
    init () {
      this.$video = this.$refs.video
      this.$container = this.$refs.container
      this.isPlaying = false
      this.$video.load()
      this.initPlayer()
      this.clearModeTimer = setTimeout(() => {
        this.isPlaying = this.options.autoplay
      }, 1000)
    },
    initPlayer () {
      this.$video.volume = this.options.volume
    },
    setClearModeTimer () {
      if (this.clearModeTimer) {
        clearTimeout(this.clearModeTimer)
      }
      this.clearModeTimer = setTimeout(() => {
        this.isClearMode = true
        this.$emit('clearMode')
      }, 3000)
    },
    pauseAllVideo () {
      const videos = document.querySelectorAll('video')
      videos.forEach(v => {
        v.pause && v.pause()
      })
    },
    play () {
      if (this.isPlaying) {
        this.pauseAllVideo()
        this.$video.muted = false
        this.$video.play()
      } else {
        this.pauseAllVideo()
        this.$video.muted = false
        this.$video.play()
      }
    },
    onPlay () {
      this.$video.muted = false
    },
    onEnd () {
      this.isPlaying = false
      this.$emit('play-end')
    }
  },
  created () {
    this.$emit('created')
    this.$nextTick(() => {
      this.init()
    })
  },

  mounted () {
    this.$emit('mounted')
  },
  updated () { },
  beforeDestroy () {
    this.$emit('beforeDestroy')
  },
  destroyed () {
    this.$emit('destroyed')
  }
}
</script>
<style lang="scss" scoped>
.sxc-player {
  width: 100%;
  height: 100%;
  min-height: 10em;
  position: relative;
  background: #000;
  overflow: hidden;
  &:fullscreen,
  &:-webkit-full-screen,
  &:-moz-full-screen,
  &:-ms-fullscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    transform: translate(0, 0);
  }
  ._poster {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  ._video-ref {
    background: #000;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    &::-webkit-media-controls,
    &::-webkit-media-controls-enclosure {
      display: none !important;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
